---
name: Focus
menu: 2. Feedback Containers
---

import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
import { Focus } from '../../dist/react-powerplug.esm'

# Focus

The Focus component is used to known when user is focusing some element.  
It's the same as `:focus` pseudo selector from css.

```js
import { Focus } from 'react-powerplug'
```

```jsx
<Focus>
  {({ focused, bind }) => (
    <div>
      <input {...bind} placeholder="Focus me" />
      <div>You are {focused ? 'focusing' : 'not focusing'} the input.</div>
    </div>
  )}
</Focus>
```

## Props

<Props>
  <Prop name="onChange" type="function">
    The onChange event of the Focus is called whenever the `focused` state changes.
  </Prop>
  <Prop name="children" type="function">
    Receive state as function. It can also be `render` prop.
  </Prop>
</Props>

## Children Props

<ChildrenProps>
  <ChildrenProp name="focused" type="boolean">
    True if is focusing the binded element
  </ChildrenProp>
  <ChildrenProp name="bind" type="object">
    There are the bind event functions.<br />
    Contains `onFocusIn` and `onFocusOut` event listeners.
  </ChildrenProp>
</ChildrenProps>
